<template>
  <div class="aside">
    <div style="width: 99%; height: 100vh; overflow-y: auto">
      <div class="aside-container">
        <div class="aside-inner">
          <div class="aside-header">
            <div class="flex items-center">
              <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="PaletteIcon"  style="width: 1em; height: 1em; font-size: 28px;margin-right: 8px"><path d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z"></path></svg>
              {{ t('flypass.theme') }}
            </div>
          </div>
          <hr
            style="              
              border-width: 0px 0px thin;
              border-style: solid;
              border-color: rgba(0, 0, 0, 0.12);
            "
          />  
          <div class="p-6">
            <h6>Lockscreen Icon</h6>
            <p class="mt-6">
              Lockscreen Icon {{ t('flypass.lockscreen_requirement1') }}</p>
            <p class="mt-6 font-bold">
              {{ t('flypass.lockscreen_requirement2') }} </p>
            <div class="image-container logo-image" @mouseenter="() => showLockScreenImageBackGround =  true" @mouseleave="showLockScreenImageBackGround = false">
              <img :src="store.lockScreenIcon" ref="lockScreenImage"/>
              <Transition name="fade">
                <div class="image-background" v-show="showLockScreenImageBackGround">  
                  <label for="lockScreenImageUpload" class="uploadButton">{{ t('flypass.choose-image') }}</label>
                  <input type="file" name="lockScreenImageUpload" id="lockScreenImageUpload" accept="image/*" @change="(e) => onLockScreenIconChange(e)" />
                  <!-- <button class="choose-image" type="">CHOOSE IMAGE</button>                                 -->
                </div>
              </Transition>
            </div>
            <hr
              class="divider"
            />
            <h6 class="mt-6">Logo Image</h6>
            <p class="mt-6">
              Logo Image {{ t('flypass.logo_requirement1') }} </p>
            <div class="image-container logo-image" @mouseenter="() => showLogoImageBackGround =  true" @mouseleave="showLogoImageBackGround = false">
              <img :src="store.headLogo" ref="headLogo"/>
              <Transition name="fade">
                <div class="image-background" v-show="showLogoImageBackGround">  
                  <label for="logoImageUpload" class="uploadButton">{{ t('flypass.choose-image') }}</label>
                  <input type="file" name="logoImageUpload" id="logoImageUpload" accept="image/*" @change="(e) => onHeadLogoChange(e)" />
                  <!-- <button class="choose-image" type="">CHOOSE IMAGE</button>                                 -->
                </div>
              </Transition>
            </div>
            <hr
              class="divider"
            />
            <h6 class="mt-6">Strip Image</h6>
            <p class="mt-6">{{ t('flypass.strip-image-requirement') }}</p>
            <div class="image-container" @mouseenter="() => showStripImageBackGround =  true" @mouseleave="showStripImageBackGround = false">
              <img :src="store.stripImage" alt="image" ref="stripImage">
              <Transition name="fade">
                <div class="image-background" v-show="showStripImageBackGround">  
                  <label for="stripImageUpload" class="uploadButton">{{ t('flypass.choose-image') }}</label>
                  <input type="file" name="stripImageUpload" id="stripImageUpload" accept="image/*" @change="(e) => onStripImageChange(e)" />                  
                </div>
              </Transition>
            </div>
          </div>   
          <div class="p-6">
            <hr
              class="divider"
            /> 
            <h6>{{ t('flypass.colors') }}</h6>
            <p class="mt-6">{{ t('flypass.colors-information') }}</p>
            <div class="mt-6">
              <span>{{ t('flypass.background-color') }}</span>
              <div class="flex">
                <el-input v-model="store.passTemplate.backgroundColor" @click="onColorSelectInputFocus($event)"></el-input>
                <el-color-picker v-model="store.passTemplate.backgroundColor" ref="backgroundColorSelector"/>
              </div>
            </div>
            <div class="mt-6">
              <span>{{ t('flypass.label-color') }}</span>
              <div class="flex">
                <el-input v-model="store.passTemplate.labelColor" @click="onLabelColorSelectInput($event)"></el-input>
                <el-color-picker v-model="store.passTemplate.labelColor" ref="labelColorSelector"/>
              </div>
            </div>

            <div class="mt-6">
              <span>{{ t('flypass.text-color') }}</span>
              <div class="flex">
                <el-input v-model="store.passTemplate.textColor" ></el-input>
                <el-color-picker v-model="store.passTemplate.textColor" color-format="rgb"/>
              </div>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { usePassStore } from '@/store/modules/pass'
import { uploadFile } from '@/api/file';
import { storeToRefs } from 'pinia';

const store = usePassStore()
const { t } = useI18n()
const { passTemplate } = storeToRefs(usePassStore())
const showLogoImageBackGround = ref(false)
const showStripImageBackGround = ref(false)
const showLockScreenImageBackGround = ref(false)

const file = ref<File | null>(null)
const headLogo = ref<HTMLImageElement>()
const lockScreenImage = ref<HTMLImageElement>()
const stripImage = ref<HTMLImageElement>()

async function onHeadLogoChange($event: Event) {      
  const fileUuid = await localUploadFile($event)      
  store.setLogoUuid(fileUuid)
  const url = await onFileChanged($event, headLogo)
  store.setHeadLogo(url)
}

async function onLockScreenIconChange($event: Event) {
  debugger
  const fileUuid = await localUploadFile($event)
  store.setIconUuid(fileUuid)
  const url = await onFileChanged($event, lockScreenImage)
  store.setLockScreenIcon(url)
}

async function onStripImageChange($event: Event) {    
  const fileUuid = await localUploadFile($event)
  store.setStripUuid(fileUuid)
  const url = await onFileChanged($event, stripImage)
  store.setStripImage(url)
}

async function localUploadFile($event: Event) {
  const target = $event.target as HTMLInputElement;
  if (target && target.files) {
    file.value = target.files[0];
    const formData = new FormData()
    formData.append('file', file.value)
    const { fileUuid } = await uploadFile(formData) 
    return fileUuid
  } 
  return ''
}
const backgroundColorSelector = ref<HTMLDivElement | null>(null)
const labelColorSelector = ref<HTMLDivElement | null>(null)

function onColorSelectInputFocus($event: Event) {  
  backgroundColorSelector.value?.show()  
}
function onLabelColorSelectInput($event: Event) {  
  labelColorSelector.value?.show()
}



function onFileChanged($event: Event, element: globalThis.Ref<HTMLImageElement | undefined>): Promise<string> {
  return new Promise(async (resolve ,reject) => {
    if (FileReader && file.value) {
      var fr = new FileReader();
      fr.onload = function () {      
        element.value && (element.value.src = fr.result as string)              
        resolve(fr.result as string)
      }  
      fr.readAsDataURL(file.value);
    }
  })
}


</script>

<style scoped lang="scss">
@import url('./styles/index.scss');


.divider {
  margin-top: 24px;
  border-width: 0px 0px thin;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.12);
}

.theme-body {

}

.image-container {            
  max-width: 300px;
  max-height: 115px;
  position: relative; 
  margin-top: 24px;
  margin-bottom: 24px;

  &.logo-image {
    width: 140px;
    height: 140px;
    max-height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    .uploadButton {
      display: flex;
    }
  }

  .image-background {
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1000;
    position: absolute;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    cursor: pointer;

    input[type="file"] {
      display: block;
      width: 66px;
      height: 25px;
      clip: rect(0px 0px 0px 0px);
      position: absolute;
      left: 0;
      top: 0;
    }

    .uploadButton {
      height: 40px;      
      border: 1px solid #ffffff;
      border-radius: 4px;
      padding: 5px;
      display: block;
      color: #ffffff;
      cursor: pointer;   
      text-align: center;   
      white-space: nowrap;
    }


    .choose-image {
      color: white;
      height: 40px;
      border: 1px solid #ffffff;
      border-radius: 4px;
      padding: 5px 15px;
    }
  }
}
</style>